<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>用户登陆成功</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <link href="css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">   
  </head>
  <body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>会员列表</h5>            
                </div>
                <div class="ibox-content">
                    <form role="form" id="queryForm" class="form-inline" action="custInfo/getList.do" method="post">
                        <input type="hidden" name="group_detail_ch_id" id="group_detail_ch_id"/>
                        <input type="hidden" name="group_detail_group_id" id="group_detail_group_id"/>

                        <div class="form-group">
                            <div class="col-sm-3">
									<input type="text" class="form-control" name="name" id="name" placeholder="昵称/手机">
							</div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                   <select class="chosen-select form-control" style="width:120px;" name="subscribe" id="subscribe" data-placeholder="请选择关注状态" >
                                    <option value="">全部</option>
                                    <option value="1">已关注</option>
                                    <option value="0">未关注</option>     
                                  </select>
                            </div>
                        </div>
                        <div class="form-group" style="position:relative">
	                            <input id="startTime" name="startTime" class="form-control" type="text" readonly placeholder="点击激活开始时间">
	                            <p style="position: absolute;top:-16px;left: -8px;overflow: visible;word-wrap: normal;white-space: nowrap;color: rgba(204, 172, 55, 0.7);">（默认导出自当前日期向后推一个月的数据）</p>
	                    </div>
	                        
	                    <div class="form-group" style="position:relative">
	                            <input id="endTime" name="endTime" class="form-control" type="text" readonly placeholder="点击激活结束时间">
	                            <p id="errTime" style="position: absolute;overflow: visible;word-wrap: normal;white-space: nowrap;color: #ff0000;"></p>
	                    </div>
                        <div class="input-group">
                            <button class="btn btn-primary" type="button" style="margin-bottom: 0px;"
                                    onclick="search();"><i class="fa fa-search"></i>&nbsp;查询
                            </button>
                        </div>
                        <div class="input-group">
	                            <button class="btn btn-primary" type="button" style="margin-bottom: 0px;"
	                                    onclick="exportExcel();"><i class="fa fa-search"></i>&nbsp;导出
	                            </button>
	                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Panel Other -->
    <div class="ibox float-e-margins" id="tableShow">
        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <!-- Example Events -->
                    <div class="example-wrap">
                        <table id="CustInfoListTable" data-mobile-responsive="true"
                               data-click-to-select="true" data-unique-id="id">
                            <thead>
                            </thead>
                        </table>
                    </div>
                </div>
                <!-- End Example Events -->
            </div>
        </div>
    </div>
    <div style="display: none;position: relative;
    top: -50px;" class="modal" id="myModal" tabindex="-1"role="dialog" aria-labelledby="myModalLable" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <%--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>--%>
                <h4 class="modal-title" id="myModallabel">消息提示</h4>
            </div>
            <div class="modal-body">
                是否删除<span id="deletecontent"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="confirm" onclick="confirm()">确定删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel" onclick="cancel()">取消删除</button>

            </div>
        </div>
    </div>
</div>
</div>


<!-- End Panel Other -->
</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!--时间选择-->
<script src="js/plugins/layer/laydate/laydate.js"></script>
<!--下拉框-->
<script src="js/plugins/chosen/chosen.jquery.js"></script>

<script>
var startTime = null;
var endTime = null;
//日期选择框
var start = {
	elem : "#startTime",
	format : "YYYY-MM-DD",
	max : "2099-06-16",
	istime : true,
	istoday : false,
	choose:function(date) {
		startTime = date;
	}
};
var end = {
	elem : "#endTime",
	format : "YYYY-MM-DD",
	max : "2099-06-16",
	istime : true,
	istoday : false,
	choose:function(date) {
		endTime = date;
	}
};
laydate(start);
laydate(end);

    var $table = $('#CustInfoListTable');

    var search = function () {
        $table.bootstrapTable('refresh');
    }
    var config = {
        ".chosen-select": {},
        ".chosen-select-deselect": {allow_single_deselect: !0},
        ".chosen-select-no-single": {disable_search_threshold: 10},
        ".chosen-select-no-results": {no_results_text: "Oops, nothing found!"},
        ".chosen-select-width": {width: "95%"}
    };

    $(document).ready(function () {
        //将表单元素和table属性转成json
        queryParams = function (params) {
            var temp = {};
            temp.currentResult = params.offset;
            temp.showCount = params.limit;
            var formParam = $('#queryForm').serializeArray();
            for (var i = 0; i < formParam.length; i++) {
                if (formParam[i].value != '') {
                    temp[formParam[i].name] = formParam[i].value;
                }
            }
            return temp;
        };


        detailFormatter = function (index, row) {
            var html = [];
            if (row.username) {
                html.push('<p><b>用户名:</b> ' + row.username + '</p>');
            }
            if (row.mobile) {
                html.push('<p><b>手机:</b> ' + row.mobile + '</p>');
            }
            if (row.email) {
                html.push('<p><b>邮箱:</b> ' + row.email + '</p>');
            }
            if (row.realname) {
                html.push('<p><b>真实姓名</b> ' + row.realname + '</p>');
            }
            if (row.companyname) {
                html.push('<p><b>公司名:</b> ' + row.companyname + '</p>');
            }
            return html.join('');
        }

        rowStyle = function (row, index) {
            var classes = ['active', 'success', 'info', 'warning', 'danger'];
            if (index % 2 === 0 && index / 2 < classes.length) {
                return {
                    classes: classes[index / 2]
                };
            }
            return {};
        }

        $table.bootstrapTable({
            url: "custInfo/getCustInfoList",
            pagination: !0,
            showRefresh: !0,
            showToggle: !0,
            showColumns: !0,
            iconSize: "outline",
            striped: true, //是否显示行间隔色
            queryParams: queryParams,//传递参数（*）
            sidePagination: "server", //服务端处理分页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [5, 10, 20, 50],        //可供选择的每页的行数（*）
            minimunCountColumns: 2,      //可供选择的每页的行数（*）
            //detailView: true,
            sortName: undefined,
            sortOrder: 'asc',
            sortStable: false,
            type: "post",
            contentType: "application/json; charset=utf-8",
            detailFormatter: detailFormatter,
            rowStyle: rowStyle,
            iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)
            icons: {
                refresh: "glyphicon-repeat",
                toggle: "glyphicon-list-alt",
                columns: "glyphicon-list",
                detailOpen: 'glyphicon-plus icon-plus',
                detailClose: 'glyphicon-minus icon-minus',
                sortable: 'glyphicon-minus icon-minus'
            },
            onLoadSuccess: function (data) {
                if (data.total < 5) {
                    $table.bootstrapTable('getOptions')["height"] = 400;
                } else {
                    $table.bootstrapTable('getOptions')["height"] = '';
                }

                $table.bootstrapTable('hideColumn', 'id');
                $table.bootstrapTable('hideColumn', 'edit');
            },
            columns: [
                 {
                    title: '头像',
                    field: 'headImgUrl',
                    align: 'center',
                    valign: 'middle',
                    	formatter: function (value, row, index) {  
                            if(value==''||value==null||value=='null'){
                            	return '<img src="<%=basePath%>/img/default_mp_head.jpg" style="width:36px;height:36px;" />';
                            }else{
                            	return '<img src="'+value+'" style="width:36px;height:36px;"/>';    
                            }                     	                
                        }
                },
                {
                    title: '昵称',
                    field: 'nickName',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '姓名',
                    field: 'name',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '手机',
                    field: 'mobile',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '性别',
                    field: 'gender',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                    	if(value == '1'){
                    		return "男";
                    	}else if(value == '2'){
                    		return "女";
                    	}else{
                    		return "";
                    	}
                    }
                },
                {
                    title: '省份',
                    field: 'province',
                    align: 'center',
                    valign: 'middle'
                },
             
                {
                    title: '城市',
                    field: 'city',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '生日',
                    field: 'birthday',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '关注状态',
                    field: 'subscribe',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                    	if(value == '1'){
                    		return "已关注";
                    	}else if(value == '0'){
                    		return "未关注";
                    	}else{
                    		return "";
                    	}
                    }
                },
                {
                    title: '激活时间',
                    field: 'time',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '会员级别',
                    field: 'vipLevel',
                    align: 'center',
                    valign: 'middle'
                }
            ]
        });
        for (var selector in config)$(selector).chosen(config[selector]);
    });

    function tableHeight() {
        return $(window).height() - 50;
    }
    var delete_tr_id = null;
    function delete_tr(a) {
        var s = $(a).parent().parent().parent().children().eq(1).text();
        delete_tr_id = $(a).parent().parent().parent().attr("data-uniqueid");
        $("#deletecontent").html(s);
        $("#tableShow").hide();
        $("#myModal").show();
    }
    function cancel() {
        $("#tableShow").show();
        $("#myModal").hide();
    }
    function confirm() {
        $.ajax({
            url: "<%=basePath%>manage/channel/deleteChannelProduct",
            type: "post",
            data: {"id": delete_tr_id},
            dataType: "json",
            success: function (note) {
                $("#tableShow").show();
                $("#myModal").hide();
                $table.bootstrapTable('refresh');
            },
            error: function () {
                alert("删除异常，请稍后重试");
            }

        });
    }

    var editChannelProduct = function (id, index) {
        var row = $table.bootstrapTable('getRowByUniqueId', id);
        // var $table = $('#ChannelProductListTable');
        $table.bootstrapTable('hideColumn', 'operate');
        $table.bootstrapTable('showColumn', 'edit');

        $table.bootstrapTable('insertRow', {
            index: index,
            row: {
                id: id,
                ch_name: row.ch_name,
                prod_name: row.prod_name,
                ratio: '<input class="form-control" type="number" id="add_ratio" placeholder="折扣" style="width:220px;"/>',
                edit: '<a><button class="btn  btn-sm" onclick="updateChannelProduct(\'' + row.id + '\',\'' + row.ch_id + '\',\'' + row.prod_id + '\',' + index + ')"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button></a>' +
                '<a><button class="btn  btn-sm" onclick="cancelFlowProductEdit(\'' + row.id + "\',\'" + index + '\')"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></a>'
            }
        });
        $table.bootstrapTable('removeByUniqueId', id);
        $table.bootstrapTable('hideRow', {index: index});
        $("#add_ratio").val(row.ratio);
        for (var selector in config)$(selector).chosen(config[selector]);
    }

    cancelFlowProductEdit = function (id, index) {
        initColumn();
        $table.bootstrapTable('refresh');

    }
    updateChannelProduct = function (id, ch_id, prod_id, index) {
        var data = {};
        var row = $table.bootstrapTable('getRowByUniqueId', id);
        data.id = row.id;
        data.ratio = $("#add_ratio").val();
        $.ajax({
            type: "POST",
            url: "<%=basePath%>manage/channel/editChannelProduct",
            data: data,
            dataType: 'json',
            cache: false,
            success: function (data) {
                initColumn();
                $table.bootstrapTable('refresh');
            },
            error: function () {
                alert("修改失败" + data.name);
                $table.bootstrapTable('refresh');
            }

        });

    }
    var exportExcel = function() {
    	var subscribe = $("#subscribe").val();
    	var name = $("#name").val();
    	var startTime = $("#startTime").val();
    	var endTime = $("#endTime").val();
    	if(startTime==null || startTime==''&&endTime==null || endTime==''){
    	}else{
    		var days = datedifference(startTime,endTime);
    		if(days>=31){
    			 //$("#errTime").html("时间范围请控制在一个月内"); 
    			 alert("时间范围请控制在一个月内");
    			 return false;
    		}
    	}	
    	$.ajax({
	        url: "<%=path%>/custInfo/checkExport",
	        type: "post",
	        data: {"subscribe": subscribe,"name":name,"startTime":startTime,"endTime":endTime},
	        dataType: "json",
	        success: function (data) {   	              
	              if(data.status=='400'){ 
	            	 alert(data.msg);
	            	 //$("#errTime").html(data.msg);
	              }else{
	            	  window.location.href = "custInfo/exportExcelCustInfo?subscribe="+subscribe+"&name="+name+"&startTime="+startTime+"&endTime="+endTime; 
	              }  	              
	        },
	        error: function () {
	            alert("异常，请稍后重试");
	        }
	    });
    }
    function datedifference(sDate1, sDate2){
    	var dateSpan,
        tempDate,
        iDays;
        sDate1 = Date.parse(sDate1);
        sDate2 = Date.parse(sDate2);
        dateSpan = sDate2 - sDate1;
        dateSpan = Math.abs(dateSpan);
        iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
        return iDays
    }
</script>
  </body>
</html>
